<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Offline Internals</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
    <link rel="stylesheet" href="offline_internals.css">

    <script type="module" src="offline_internals.js"></script>
  </head>
  <body>
    <h1>Offline Internals</h1>
    <div>
      <span id="current-status"></span>
      <button id="refresh">Refresh page</button>
      <button id="dump">Dump</button>
    </div>
    <dialog id="dump-modal">
      <textarea id="dump-box" name="json-box" rows="10" cols="40" readonly>
      </textarea>
      <button id="copy-to-clipboard">Copy</button>
      <button id="close-dump">Close</button>
      <span id="dump-info"></span>
    </dialog>

    <h2>Event Logs</h2>
    <div>
      <button id="refresh-logs">Refresh Logs</button>
      <div>
        <input type="checkbox" id="model-checkbox">Page Model Log</input>
      </div>
      <div>
        <input type="checkbox" id="request-checkbox">Request Queue Log</input>
      </div>
      <div>
        <input type="checkbox" id="prefetch-checkbox">Prefetching Log</input>
      </div>
      <ul id="logs"></ul>
    </div>

    <h2>Stored Pages</h2>
    <div>
      <button id="delete-selected-pages">Delete selected</button>
    </div>
    <table class="stored-pages-table">
      <thead>
        <tr>
          <th>#</th>
          <th><input type="checkbox" id="toggle-all-stored"></th>
          <th>URL</th>
          <th>Namespace</th>
          <th>Size (Kb)</th>
        </tr>
      </thead>
      <tbody id="stored-pages"> </tbody>
    </table>
    <template id="stored-pages-table-row">
      <tr>
        <td></td>
        <td><input type="checkbox" name="stored"></td>
        <td><a></a></td>
        <td></td>
        <td></td>
      </tr>
    </template>
    <div id="page-actions-info" class="dump"></div>

    <h2>Request Queue</h2>
    <div>
      <button id="delete-selected-requests">Delete selected</button>
    </div>
    <table class="request-queue-table">
      <thead>
        <tr>
          <th><input type="checkbox" id="toggle-all-requests"></th>
          <th>URL</th>
          <th>Created Timestamp</th>
          <th>Status</th>
          <th>Request Origin</th>
        </tr>
      </thead>
      <tbody id="request-queue"> </tbody>
    </table>
    <template id="request-queue-table-row">
      <tr>
        <td><input type="checkbox" name="requests"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </template>
    <div id="request-queue-actions-info" class="dump"></div>
    <input id="url" type="url"
        placeholder="http://www.url1.com, http://www.url2.com, ...">
    <button id="add-to-queue">Load in background</button>
    <div id="save-url-state"></div>

    <h2>Prefetching</h2>
    <div>
      <div>
        <button id="schedule-nwake">Schedule NWake</button>
        <button id="cancel-nwake">Cancel NWake</button>
      </div>
      <div>
        <input id="generate-urls" type="text"
            placeholder="http://www.url1.com, http://www.url2.com, ...">
        <button id="generate-page-bundle">Generate Page Bundle</button>
      </div>
      <div>
        <input id="operation-name" type="text"
                                   placeholder="operations/1234-5678">
        <button id="get-operation">Get Operation</button>
      </div>
      <div>
        <input id="download-name" type="text" placeholder="us/page/1234-5678">
        <button id="download-archive">Download</button>
      </div>
    </div>
    <div>
      <input type="checkbox" id="limitless-prefetching-checkbox">
          Enable limitless prefetching
      </input>
    </div>
    <div>
      <form id="testing-header-form">
        <fieldset id="testing-header-fieldset">
          <legend>Testing header value:</legend>
          <label>
            <input type="radio" id="testing-header-default"
                   name="testing-header" value="">
            Default
          </label>
          <label>
            <input type="radio" id="testing-header-enable" name="testing-header"
                   value="ForceEnable">
            Force enable
          </label>
          <label>
            <input type="radio" id="testing-header-disable"
                   name="testing-header" value="ForceDisable">
            Force disable
          </label>
        </fieldset>
      </form>
    </div>
    <div id="prefetch-actions-info" class="dump"></div>
  </body>
</html>
